<template>
	<view class="container">
		<uv-form labelPosition="left" :model="model" ref="form">
			<view class="text">
				<view class="text-1">
					<uv-form-item label="用户头像" prop="name" label-width="100px">
						<uv-input v-model="model.name" border="none" readonly>
						</uv-input>
					</uv-form-item>
				</view>
			</view>
			<view class="text" style="margin-top: 5%;">
				<view class="text-1">
					<uv-form-item label="用户姓名" prop="linkMan" label-width="100px">
						<uv-input v-model="model.linkMan" border="none" readonly>
						</uv-input>
						<template v-slot:right>
							<uv-icon name="arrow-right"></uv-icon>
						</template>
					</uv-form-item>
				</view>
			</view>
			<view class="text" style="margin-top: 5%;">
				<view class="text-1">
					<uv-form-item label="手机号码" prop="linkPhone" label-width="100px">
						<uv-input v-model="model.linkPhone" border="none" readonly>
						</uv-input>
					</uv-form-item>
				</view>
			</view>
			<view class="text" style="margin-top: 5%;">
				<view class="text-1">
					<uv-form-item label="登录密码" prop="password" label-width="100px" @click="showPassword">
						<uv-input v-model="model.password" border="none">
						</uv-input>
						<template v-slot:right>
							<uv-icon name="arrow-right"></uv-icon>
						</template>
					</uv-form-item>
				</view>
			</view>
		</uv-form>
		<uv-popup ref="popup" mode="bottom" :closeOnClickOverlay="false" :closeable="true" :round="10">
			<view style="display: flex;justify-content: center;">
				<view style="height: 500rpx;width: 90%;margin-top: 35rpx;">
					<title style="color: #242f66;font-size: 30rpx;">
						用户姓名
					</title>
					<view class="text" style="margin-top: 5%;width: 100%;">
						<view class="text-1">
							<uv-input v-model="list.certifId" border="none" placeholder="请输入用户姓名">
							</uv-input>
						</view>
					</view>
					<view class="button-wrap">
						<!-- 确认 -->
						<button class="button-login" @click="submitRefund">
							<text class="wx-login loginText1">确认</text>
						</button>
					</view>
				</view>
			</view>
		</uv-popup>
		<uv-popup ref="popup1" mode="bottom" :closeOnClickOverlay="false" :closeable="true" :round="10">
			<view style="display: flex;justify-content: center;">
				<view style="height: 600rpx;width: 90%;margin-top: 35rpx;">
					<title style="color: #242f66;font-size: 30rpx;">
						新密码
					</title>
					<view class="text" style="margin-top: 5%;width: 100%;margin-bottom: 5%;">
						<view class="text-1">
							<uv-input v-model="list.newPassword" border="none" placeholder="请输入新密码" @blur="blur">
							</uv-input>
						</view>
					</view>
					<title style="color: #242f66;font-size: 30rpx;">
						确认新密码
					</title>
					<view class="text" style="margin-top: 5%;width: 100%;">
						<view class="text-1">
							<uv-input v-model="newPassword" border="none" placeholder="请输入确认新密码" @blur="blur">
							</uv-input>
						</view>
					</view>
					<view class="button-wrap" style="margin-top: 15%;">
						<!-- 提交 -->
						<button class="button-login" @click="Register">
							<text class="wx-login loginText1">提交</text>
						</button>
					</view>
				</view>
			</view>
		</uv-popup>
		<view class="button-wrap">
			<!-- 退出登录 -->
			<button class="button-login" @click="navigateToAccountLogin">
				<text class="wx-login loginText1">退出登录</text>
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				model: {
					linkMan: "",
					linkPhone: "",
				},
				list: {},
				newPassword: ""
			}
		},
		onLoad(e) {
			const arr = uni.getStorageSync('listData')
			this.model.linkMan = arr.linkMan
			this.model.linkPhone = arr.linkPhone
		},
		methods: {
			blur() {
				if (this.model1.newPassword != "" && this.newPassword != "") {
					if (this.model1.newPassword != this.newPassword) {
						uni.showToast({
							title: "两次输入密码不一致!",
							icon: 'none',
							duration: 2000
						})
					}
				}
			},
			exSelect() {
				this.$refs.popup.open();
			},
			showPassword() {
				this.$refs.popup1.open();
			},
			submitRefund() {},
			Register() {
				if (this.model1.newPassword != "" && this.newPassword != "") {
					chPwdWithPhone(this.model1).then(res => {
						console.log(res)
						const code = res.data.code;
						if (code == "000000") {
							uni.showToast({
								title: "修改成功",
								icon: 'success',
								duration: 2000
							})
							setTimeout(() => {
								wx.reLaunch({
									url: '/pages/login/login'
								})
							}, 2000);
						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'none',
								duration: 2000
							})
						}
					})
				}
			},
			navigateToAccountLogin() {
				uni.showModal({
					// 询问用户是否退出登录
					title: '退出登录',
					content: '您确定要退出登录吗?',
					success: res => {
						if (res.confirm) {
							//确定退出并清除token
							uni.clearStorageSync();

							//退出成功！并跳转到其他页面
							uni.showToast({
								title: '退出成功',
								icon: 'none',
							});
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/index/index',
								});
							}, 1500);
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					},
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.imgData {
		width: 100rpx;
		height: 100rpx;
		border-radius: 20rpx;
		// background-image: url('../../static/index.png');
		background-size: 100% 100%;
	}

	.text {
		width: 90%;
		height: 115rpx;
		border: 1px solid #031A6E;
		border-radius: 15px;
		margin-top: 10%;
	}

	.text-1 {
		display: flex;
		justify-content: space-between;
	}

	/deep/.uv-input {
		height: 115rpx;
	}

	.button-wrap {
		width: 100%;
		margin-top: 30%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.button-login {
		width: 80%;
		height: 110rpx;
		border-radius: 20rpx;
		background: #222d65;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.button-wrap2 {
		margin-top: 20rpx;
	}

	/deep/.uv-form {
		width: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	/deep/.uv-form-item {
		width: 100%;
		height: 115rpx;
	}

	/deep/.uv-form-item__body {
		margin: 0 0 0 40rpx;
		height: 115rpx;
	}
</style>